<template>
  <div class="list-card">
    <div class="list-card__wrap">
      <div class="list-card__title">
        <el-button type="primary" @click="sort">
          To original order
        </el-button>
      </div>
      <div class="demo_card">
        <draggable
          v-model="data"
          class="list-group"
          tag="transition-group"
          :component-data="{
            tag: 'ul',
            type: 'transition-group',
            name: !drag ? 'flip-list' : null
          }"
          v-bind="dragOptions"
          item-key="order"
          @start="drag = true"
          @end="drag = false"
        >
          <template #item="{element}">
            <li class="list-card__item">
              {{ element.name }}
            </li>
          </template>
        </draggable>
      </div>
      <div class="demo_card">
        <div class="code">{{ data }}</div>
      </div>
    </div>
    <!--demo2-->
    <div class="list-card__wrap">
      <div class="demo_card">
        <h3>Draggable 1</h3>
        <draggable
          class="list-group"
          :list="list1"
          group="people"
          item-key="name"
        >
          <template #item="{element, index}">
            <div class="list-group-item">{{ element.name }} {{ index }}</div>
          </template>
        </draggable>
      </div>
      <div class="demo_card">
        <h3>Draggable 2</h3>
        <draggable
          class="list-group"
          :list="list2"
          group="people"
          item-key="name"
        >
          <template #item="{element, index}">
            <div class="list-group-item">{{ element.name }} {{ index }}</div>
          </template>
        </draggable>
      </div>
      <div class="demo_card">
        <h3>list 1</h3>
        <div class="code">
          {{ list1 }}
        </div>
      </div>
      <div class="demo_card">
        <h3>list 2</h3>
        <div class="code">
          {{ list2 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import draggable from 'vuedraggable'
import { defineComponent, computed, ref, reactive } from 'vue'
export default defineComponent({
  name: 'TransitionExample2',
  components: {
    draggable
  },
  setup() {
    const message = [
      '列表1',
      '列表2',
      '列表3',
      '列表4',
      '列表5'
    ]
    const drag = ref(false)
    const data = ref<any>([])
    const list1 = reactive([
      { name: 'John', id: 1 },
      { name: 'Joao', id: 2 },
      { name: 'Jean', id: 3 },
      { name: 'Gerard', id: 4 }
    ])
    const list2 = reactive([
      { name: 'Juan', id: 5 },
      { name: 'Edgard', id: 6 },
      { name: 'Johnson', id: 7 }
    ])
    const list = message.map((name, index) => {
      return { name, order: index + 1 }
    })
    data.value.push(...list)
    return {
      data,
      drag,
      sort: function() {
        data.value = list.sort((a, b) => a.order - b.order)
      },
      dragOptions: computed(() => {
        return {
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost'
        }
      }),
      list1,
      list2
    }
  }
})
</script>

<style lang="less" scoped>
.button {
  margin-top: 35px;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-card {
  &__wrap {
    // background: #ddd;
    &:hover {
      box-shadow: 2px 2px 5px 2px #999;
    }
    padding: 15px;
    margin-bottom: 18px;
  }
  &__title {
    margin-bottom: 10px;
  }
  &__item {
    background: #fefefe;
    margin-bottom: 10px;
    width: 20vw;
    padding: 20px 6px;
    border-radius: 8px;
    cursor: move;
  }
}
.list-group {
  display: inline-block;
  margin-top: 0;
  // padding: 20px 0;
  min-height: 40px;
  min-width: 60px;
  // margin-right: 16px;
}
.list-group-item {
  cursor: move;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  height: 60px;
  width: 150px;
  padding: 15px;
}
.code {
  display: inline-block;
  width: 200px;
  vertical-align: top;
  background: yellowgreen;
  padding: 10px;
  line-height: 1.5;
  border-radius: 8px;
}
.demo_card {
  display: inline-block;
  vertical-align: top;
  margin-right: 16px;
}
</style>
